<template>
  <div class="xw-resize">
    <h2>监听尺寸变化ResizeObserver</h2>
    <div class="size-show">
      <div>width: {{ size.width }}</div>
      <div>height: {{ size.height }}</div>
    </div>
    <div v-resize="resizeFun" class="resize-obj"></div>
  </div>
</template>

<script setup lang="ts">
// import { useResize } from "@/hooks/useResize";
// import useResize from "xw-resize-vite-plugin";
import { ref, onMounted } from "vue";
const size = ref({
  width: 0,
  height: 0,
});
const resizeFun = (e: any) => {
  console.log(e);
  size.value.width = e.width;
  size.value.height = e.height;
};
onMounted(() => {
  // const resizeobj: HTMLElement = document.querySelector(
  //   ".resize-obj"
  // ) as HTMLElement;
  // useResize(resizeobj, resizeFun);
});
</script>

<style lang="scss" scoped>
.resize-obj {
  width: 200px;
  height: 200px;
  resize: both;
  cursor: pointer;
  background-color: yellow;
  margin: 30px 0;
  border: 3px solid rosybrown;
  overflow: hidden;
}
</style>
